<template>
    <table>
        <caption v-if="title" style="font-size: 0.9rem; font-weight: bold; padding: 0.5rem 0;">{{ title }}</caption>
        <thead>
            <tr>
                <th v-for="(column, columnIndex) in columns" :key="columnIndex">
                    <slot :name="`header-${columnIndex}`">{{ column.label }}</slot>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, rowIndex) in data" :key="rowIndex">
                <td v-for="(column, columnIndex) in columns" :key="columnIndex">
                    <slot :name="`cell-${rowIndex}-${columnIndex}`" :row="item" :column="column">
                        {{ item[column.value] }}
                    </slot>
                </td>
            </tr>
        </tbody>
    </table>
</template>
<script setup lang="ts">
defineProps<{
    title?: string
    data: any
    columns: {
        value: string;
        label: string;
    }[]
}>()   
</script>
<style scoped>
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

th,
td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

th {
    background-color: #f2f2f2;
    font-weight: bold;
}

tr:hover {
    background-color: #f5f5f5;
}
</style>